<template>
  <div class="homestay">
    <div class="content_box">
      <div class="container">
        <el-empty
          v-if="this.form.length == 0"
          class="empty_box"
          description="没有民宿信息"
        ></el-empty>
        <div v-else class="contner_list" v-for="(item, id) in form" :key="id">
          <el-form ref="form" :model="item">
            <el-form-item>
              <img :src="item.img" alt="" class="img_mian" />
            </el-form-item>
            <el-form-item>
              <el-input v-model="item.name" disabled></el-input>
            </el-form-item>
            <el-form-item>
              <el-input v-model="item.price" disabled></el-input>
            </el-form-item>
            <el-date-picker
              v-model="item.date"
              type="daterange"
              range-separator="至"
              start-placeholder="入住日期"
              end-placeholder="退房日期"
              value-format="yyyy-MM-dd"
              :disabled="item.disabled == 0 ? true : false"
            >
            </el-date-picker>
            <!-- <el-form-item>
              <el-input
                v-model="item.dateStart"
                disabled
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-input
                v-model="item.dateEnd"
                disabled
              ></el-input>
            </el-form-item> -->
            <!-- <el-form-item>
              <el-input
                type="textarea"
                v-model="item.des"
                :disabled="item.disabled == 0 ? true : false"
                :rows="5"
                resize="none"
              >
              </el-input>
            </el-form-item> -->
            <el-form-item>
              <el-button type="primary" style="margin-left: 50px" @click="onSubmit(item)"
                >修改</el-button
              >
              <el-button type="success" @click="onSure(item)">确定修改</el-button>
              <!-- <el-button type="primary" @click="onDelete(index)">删除</el-button> -->
              <el-popconfirm
                confirm-button-text="确定"
                cancel-button-text="取消"
                icon="el-icon-info"
                icon-color="red"
                title="确定退订吗？"
                @confirm="confirm(item)"
                @cancel="cancel"
              >
                <el-button type="danger" class="danger" slot="reference">退订</el-button>
              </el-popconfirm>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { checkAllOrderForm, cancelHomestay, modifyOrderForm } from "../../http/axios";
export default {
  mounted() {
    let username = localStorage.getItem("username");
    console.log(username);
    checkAllOrderForm({ username: username }).then((res) => {
      console.log(res);
      let formArr = [];
      for (let i = 0; i < res.obj.data.length; i++) {
        res.obj.data[i].disabled = 0;
        res.obj.data[i].date = [res.obj.data[i].dateStart, res.obj.data[i].dateEnd];
        formArr.push(res.obj.data[i]);
      }
      // res.obj.data.map((item) => {
      //   this.form.push(Object.assign({}, item, { disabled: 0 }));
      // });
      console.log(formArr, "--------");
      this.form = formArr;
    });
  },
  data() {
    return {
      dialogImageUrl: "",
      dialogVisible: false,
      disabled: false,

      imageUrl: "",
      //是否弹框
      centerDialogVisible: false,
      visibleSure: false,
      queryInfo: {
        qurey: "",
      },
      searchText: "",
      formInline: {
        user: "",
      },

      allForm: [],
      form: [],
    };
  },
  methods: {
    //确定删除
    confirm(item) {
      console.log(item);
      cancelHomestay({
        id: item.id,
        username: item.username,
        phone: item.phone,
      }).then((res) => {
        console.log(res, "退订成功");
        this.$router.go(0)
      });
    },
    cancel() {
      console.log("取消");
    },
    //修改
    onSubmit(item) {
      // console.log(item.id);
      item.disabled = 1;
      // console.log("submit!");
    },
    // 修改确定
    onSure(item) {
      modifyOrderForm({
        id: item.id,
        username: item.username,
        phone: item.phone,
        date: item.date,
      }).then((res) => {
        console.log(res, "修改成功");
      });
      item.disabled = 0;
    },
  },
};
</script>

<style scoped>
.content_box {
  display: flex;
  justify-content: center;
}
.empty_box {
  width: 100%;
  margin: auto;
}
.heald-container {
  display: flex;
  justify-content: space-between;
  padding: 0 200px;
}
.search {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
.add_item {
  margin-top: 20px;
}
.container {
  display: flex;
  flex-wrap: wrap;
  width: 1400px;
}
.contner_list {
  width: 300px;
  border-radius: 10px;
  /* display: inline-block; */
  margin: 0 calc((1400px - 1200px) / 8);
}
.img_mian {
  width: 100%;
  height: 300px;
  border-radius: 20px;
  margin-top: 20px;
}

.uplode_url {
  display: flex;
  justify-content: center;
}
</style>

<style scoped>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.danger {
  margin-left: 10px;
}
.el-date-editor--daterange.el-input__inner{
  width: 300px;
  margin-bottom: 10px;
}
</style>
